<template>
    <div class="operation">
        <div class="operation-heder-t">
            <HeadTop :title="headTitle" :flag='true'  v-on:routerChange="routerChange"></HeadTop>
            <div class="detail-form-tab">
                <div
                        class="detail-form-tab-con"
                        v-for="(item, index) in msg2" :key="index"
                        :class="{'detail-tab-active': tabIdx2 === index + 1}"
                        @click="detailTabChange(index + 1)"
                >
                    {{item}}</div>
            </div>
        </div>
        <div class="operation-top-div"></div>
        <div class="operation-con-top">
            <div class="search-left" @click="show = true">
                <img src="../../../../assets/icon-time.png" class="search-icon" />
                <section v-if="startDate">
                    {{startDate}}<span class="search-left-tips">至</span>{{endDate}}
                </section>
                <section v-else>
                    全部
                </section>

                <!-- <input placeholder="请选择日期区间" v-model="date"  @click="show = true" /> -->
            </div>
        </div>
        <div class="operation-con">
            <div class="operation-add" @click="getAdd()">
                <img src="../../../../assets/icon-add.png" class="operation-add-icon"/>
                添加
            </div>
            <!-- <van-cell title="选择日期区间" :value="date" @click="show = true" /> -->
            <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/>
            <div class="bios-title">药品数量</div>
            <div class="bios-title-list">
                <div class="bios-title-list-div " v-for="(item, index) in fishList" @click="fishListChange(index)" :class="{'bios-title-list-div-left':(index+1)%3 != 0, 'bios-active':fishListIdx == index}" :key="index">
                    <div class="bios-title-list-div-number">{{item.num + item.measurement}}</div>
                    <div class="bios-title-list-div-con van-ellipsis">{{item.medictionName}}</div>
                </div>
            </div>

            <div class="operation-title">历史报表</div>

            <listOne
                    :tabIdx="tabIdx"
                    :resultDetail="resultDetail"
                    :pageSize="pageSize"
                    :pageCount="pageCount"
                    :dataType="dataType"
                    v-on:showChange="showChange2"
                    v-on:pageChange="pageChange"
                    v-if="tabIdx2 == 1"
            ></listOne>
            <listTwo
                    :tabIdx="tabIdx"
                    :resultDetail="resultDetail"
                    :pageSize="pageSize"
                    :pageCount="pageCount"
                    :dataType="dataType"
                    v-on:showChange="showChange2"
                    v-on:pageChange="pageChange"
                    v-if="tabIdx2 == 2"
            ></listTwo>
        </div>

    </div>
</template>

<script >
import { getMedictionReportList, getMedictionList, getReportById, getMedictionCheckReportList} from '../../../../api/index.js'
import { getYYYYMMDD } from '../../../../api/unit.js'
import listOne from './components/listOne.vue'
import listTwo from './components/listTwo.vue'
import HeadTop from '../../../../components/headTop.vue'
export default {
  data () {
    return {
      // flag: flag, // 控制是否跳到指定页面
      headTitle: '药品管理',
      tabIdx2: 1,
      tabIdx: -1,
      msg2: ['日常用药', '盘库'],
      fishTankId: 'a8e986eb-2d28-40cb-bdec-699c199d1e4c',
      page: 1,
      pageSize: 10,
      pageCount: 0,
      dataType: [],
      date: '',
      show: false,
      fishList: [],
      startDate: '',
      endDate: '',
      minDate: new Date(new Date() - 365 * 24 * 60 * 60 * 1000),
      maxDate: new Date(),
      resultDetail: {},
      fishListIdx: -1
    }
  },
  watch: {
    $route: {
      handler (val) {
        this.dataType = []
        this.page = 1
        // this.tabIdx2 = this.$route.query.index
        // debugger
        this.getData()
        // 深度监听，同时也可监听到param参数变化
      },
      deep: true
    }
  },
  methods: {
    async detailTabChange (index) {
      this.$router.push({path: '/laboratory/manage', query: {index: index}})
      this.tabIdx = -1
      this.fishListIdx = -1
    },

    getUrl () {
      this.$router.go(-1)
    },
    getAdd () {
      if (this.tabIdx2 === 1) {
        this.$router.push({path: '/laboratory/addManage'})
      } else {
        this.$router.push({path: '/laboratory/addInventory'})
      }
    },
    async getData () {
      this.tabIdx2 = parseInt(this.$route.query.index)
      if (this.fishList !== []) {
        const data2 = await getMedictionList()
        this.fishList = data2.data
      }
      const data = {
        keyword: '',
        page: this.page,
        pageSize: this.pageSize
      }
      // data = JSON.stringify(data)
      if (this.startDate !== '') {
        data.startDate = this.startDate
        data.endDate = this.endDate
      }
      if (this.fishListIdx !== -1) {
        data.keyword = this.fishList[this.fishListIdx].id
        // debugger
      }
      let result
      if (this.tabIdx2 === 1) {
        result = await getMedictionReportList(data)
      } else {
        result = await getMedictionCheckReportList(data)
      }

      this.pageCount = result.data.page.pageCount
      let dataType = this.dataType
      let msg = result.data.result
      msg.map(v => {
        dataType.push(v)
      })

      this.dataType = dataType
    },
    pageChange (event) {
      this.page = ++this.page
      this.getData()
    },
    async showChange2 (index, id, type) {
      if (this.tabIdx !== index) {
        this.resultDetail = (await getReportById(id, type)).data
        this.tabIdx = index
      } else {
        this.tabIdx = -1
        this.resultDetail = {}
      }
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.startDate = getYYYYMMDD(date[0]).nTime
      this.endDate = getYYYYMMDD(date[1]).nTime
      this.page = 1
      this.dataType = []
      this.getData()
    },
    routerChange () {
      this.$router.push({path: '/laboratory'})
    },
    fishListChange (index) {
      this.fishListIdx = this.fishListIdx === index ? -1 : index
      this.page = 1
      this.dataType = []
      this.getData()
    }
  },
  mounted () {
    this.getData()

    // debugger
  },
  components: {
    listOne,
    HeadTop,
    listTwo
  }
}
</script>

<style scoped>
    .operation{

    }
    .bios-title{
        font-size: 26px;

        font-weight: bold;
        margin-top: 24px;
        margin-bottom: 52px;
    }

    .bios-title-list{
        display: flex;
        flex-wrap: wrap;
    }
    .bios-title-list-div{
        width:208px;
        height:141px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        display: flex;
        flex-direction: column;
        font-size: 28px;
        justify-content: center;
        align-items: center;
        color: #a0a0a0;
        margin-bottom: 23px;
    }
    .bios-active{
        box-shadow:0px 0px 10px 0px rgba(0,186,255,1);
    }
    .bios-title-list-div-left{
        margin-right: 33px;
    }
    .bios-title-list-r{
        margin-right: 34px;
    }
    .bios-title-list-div-number{
        color: #202020;
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 22px;
    }
    .bios-title-list-div-con{
        text-align: center;
        width: 180px;
    }
    .operation-heder-t{
        position: fixed;
        top: 0;
        left: 0;
        width: 750px;
        background: #fff;
    }

    .detail-form-tab{
        display: flex;
        justify-content: space-around;
        font-size: 28px;
        padding-bottom: 20px;
        width: 690px;
        margin-left: 30px;
    }
    .detail-form-tab-con{
        font-size: 28px;
        /* border:2px solid #ccc; */
        border-radius:30px;
        padding: 12px 24px;
        color: #8c8c8c;
        font-weight: normal;
    }
    .detail-tab-active{
        color: #fff;
        background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
        font-weight: bold;
    }
    .operation-top-div{
        height: 180px;
        width: 750px;
    }
    .operation-con{
        min-height: 1300px;
        background: #ebebeb;
        padding: 30px 30px 30px;
    }
    .search-icon{
        width: 31px;
        height: 31px;
        /* margin-left: 36px; */
        margin-right: 19px;
    }
    .search-left-tips{
        font-size: 26px;
        color: #c3c3c3;
        padding: 0 29px;
    }
    .search-left{
        background:#fff;
        font-size: 28px;
        line-height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #202020;
        font-weight: bold;
        /* width: 750px; */
    }
    .operation-add{
        background:#fff;
        font-size: 32px;
        color: #202020;
        display: flex;
        align-items: center;
        width: 692px;
        height: 75px;
        justify-content: center;
        box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .operation-add-icon{
        width: 35px;
        height: 35px;
        margin-right: 9px;
    }
    .operation-con-top{
        border-top: 5px solid #ebebeb;
        /* display: flex; */
    }
    .operation-title{
        color: #a0a0a0;
        font-size: 28px;
        margin-top: 51px;
    }

</style>
